今天的內容要介紹 Vue 如何在元件狀態發生變化時，執行CSS過渡漸變的動畫效果，來增添使用者介面的互動性。

Transition 元件是什麼？

<transition> 是 Vue 提供的一個內置元件，不需要註冊就可以在任何地方中使用，讓元件在過渡轉場時，出現漸變的動畫效果，並且可以透過使用 v-if 、 v-show 、<component>、key屬性觸發切換進退場。

以下將介紹 Transition 進場與退場的 CSS class：

圖片來源：https://zh-hk.vuejs.org/guide/built-ins/transition.html

• v-enter-from：進入動畫的起始狀態。

• v-enter-active：進入動畫的生效狀態。

• v-enter-to：進入動畫的結束狀態。

• v-leave-from：離開動畫的起始狀態。

• v-leave-active：離開動畫的生效狀態。

• v-leave-to：離開動畫的結束狀態。

其中 v-enter-active 和 v-leave-active 可以被用來定義離開動畫的持續時間、延遲與速度曲線類型。

Transition 元件如何使用？

將要執行過渡動畫的元素寫在<transition>標籤裡，然後利用 CSS 語法來定義漸變的樣式。

命名 Transition

若要定義多組不同的漸變樣式，可以在<transition>加上 name 屬性，並將其對應的 CSS class 前綴 v- 改成自定義的名稱。

以下是官方文件的範例

在<template>標籤寫入：

<Transition name="fade">
  ...
</Transition>

在<style>標籤寫入：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

TransitionGroup 元件是什麼？

<TransitionGroup>是 Vue 提供的一個內置元件，用於 v-for 列表渲染的動畫效果。

以下是官方文件的範例

在<template>標籤寫入：

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

在<style>標籤寫入：

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

參考資源

https://book.vue.tw/CH2/2-5-transitions.html
https://zh-hk.vuejs.org/guide/built-ins/transition.html
https://medium.com/unalai/%E8%AA%8D%E8%AD%98-vue-transition-%E5%85%83%E4%BB%B6-%E6%8E%A7%E5%88%B6%E9%81%8E%E6%B8%A1%E6%95%88%E6%9E%9C-eb9510e0d2b1
https://ithelp.ithome.com.tw/m/articles/10329881